import React from 'react'

import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import './Swiper.less'

import Pagination from './Pagination/Pagination'

import PropTypes from 'prop-types';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);




export default class Swiper extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            currentIndex:0,
            // banners:[],

        }
    }


    handleChangeIndex=(index)=>{
    //   console.log(index)
      this.setState({
          currentIndex:index
      })
    }
    // componentDidMount() {
    //     this.setState({
    //    banners:this.props.banners
    //     })
    // }

    render() {
        console.log(this.props.banners)
        let banners = this.props.banners;

        return (
        
            <div className='swiper' >

                <AutoPlaySwipeableViews enableMouseEvents  index={this.state.currentIndex}  onChangeIndex={this.handleChangeIndex}>
                    {
                     banners.length>0?
                    
                    banners.map((item, index) => {
                        return (
                            <div className='swiper-view' key={item + index} style={{

                            }}>


                                <img src={item} alt="" />
                            </div>
                        )
                    }
                    
                    
                    
                    ):

                    <div>数据正在加载中....</div>
                    
                    }


                </AutoPlaySwipeableViews>
                <Pagination   myindex={this.state.currentIndex}  
                
                dots={banners.length}
                />
            </div>

        )
    }
}


// Swiper.propTypes = {
//     banners: PropTypes.array
//   };

// Swiper.defaultProps = {
//     banners: []
//   };